<!DOCTYPE html>
<style>
    div.columns {
        height: 50px;
        width: 110px;
        margin: 10px 0;
        padding: 10px;
        border: solid black;
        font-family: Ahem;
        font-size: 25px;
        color: lightblue;
        display: inline-block;
        vertical-align: bottom;
        position: relative;
    }

    .column {
        position: absolute;
        width: 50px;
    }

    .left { left: 10px; }
    .right { right: 10px; }

    .column > span {
        background-color: lightblue;
        display: block;
        width: 25px;
        height: 25px;
        border: solid dodgerblue;
        box-sizing: border-box;
    }
</style>
<p>
    The blue borders should coincide with light blue squares, like this:
    <span style="display: inline-block; background-color: lightblue; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
    There should be none of this:
    <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
    or this:
    <span style="display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
</p>
<div class="columns">
    <div class="column left"><br><span></span></div>
    <div class="column right"><span></span><span></span></div>
</div>
<div class="columns">
    <div class="column left"><br><span></span></div>
    <div class="column right"><span></span><span></span></div>
</div>
<div class="columns">
    <div class="column left"><br><span></span></div>
    <div class="column right"><span></span><span></span></div>
</div>
<div class="columns">
    <div class="column left"></div>
    <div class="column right"><span></span><span></span></div>
</div>
<div class="columns">
    <div class="column right"><span></span></div>
</div>
<div class="columns">
    <div class="column right"><span></span></div>
</div>
<div class="columns">
    <div class="column left"><br><span></span></div>
    <div class="column right"><span></span></div>
</div>
